<template>
  <section>
    <!-- 实时负荷 -->
    <div>
      <div class="title">
        <svg-icon icon-class="today0" class="todays" style="font-size: 3vh;margin-right: 10px" />
        实时负荷 (KW)
      </div>
      <div v-if="topData.load" class="numValue">{{ topData.load }}</div>
      <div v-if="topData.load" class="yesterday">昨日同期  {{ topData.yesterdayLoad }} <span class="isUp" :class="{down: isDownLoad}" style="margin-left: 10px">{{ topData.loadPercent }}</span></div>
      <div ref="chart" class="chart" />
    </div>
    <!-- 进线电压 -->
    <div>
      <div class="title">
        <svg-icon icon-class="today0" class="todays" style="font-size: 3vh;margin-right: 10px" />
        进线电压 (V)
      </div>
      <div class="voltage">
        <div class="item">
          <div class="itemTitle">1#进线电压</div>
          <div ref="voltageChartOne" class="chart" />
        </div>
        <div v-if="topData.incomingLineVoltage && topData.incomingLineVoltage[1]" class="item">
          <div class="itemTitle">2#进线电压</div>
          <div ref="voltageChartTwo" class="chart" />
        </div>
      </div>
    </div>
    <!-- 1#进线电流 -->
    <div>
      <div class="title">
        <svg-icon icon-class="today0" class="todays" style="font-size: 3vh;margin-right: 10px" />
        1#进线电流 (A)
      </div>
      <div v-if="topData.incomingCurrentPoint" class="electricity">
        <div class="item">
          <div style="font-size: 24px;font-family: 'bigfont'; color: #FFC400">{{ topData.incomingCurrentPoint[0].Ia }}</div>
          <div style="font-size: 2vh; color: #B6F9E4">Ia</div>
        </div>
        <div class="item">
          <div style="font-size: 24px;font-family: 'bigfont'; color: #0ACD90">{{ topData.incomingCurrentPoint[0].Ib }}</div>
          <div style="font-size: 2vh; color: #0ACD90">Ib</div>
        </div>
        <div class="item">
          <div style="font-size: 24px;font-family: 'bigfont'; color: #F53028">{{ topData.incomingCurrentPoint[0].Ic }}</div>
          <div style="font-size: 2vh; color: #F53028">Ic</div>
        </div>
      </div>
      <div ref="chartEtcOne" class="chart" />
    </div>
    <!-- 2#进线电流 -->
    <div v-if="topData.incomingCurrentLogPoint && topData.incomingCurrentLogPoint[1]">
      <div class="title">
        <svg-icon icon-class="today0" class="todays" style="font-size: 3vh;margin-right: 10px" />
        2#进线电流 (A)
      </div>
      <div class="electricity">
        <div class="item">
          <div style="font-size: 24px;font-family: 'bigfont'; color: #FFC400">{{ topData.incomingCurrentPoint[1].Ia }}</div>
          <div style="font-size: 2vh; color: #B6F9E4">Ia</div>
        </div>
        <div class="item">
          <div style="font-size: 24px;font-family: 'bigfont'; color: #0ACD90">{{ topData.incomingCurrentPoint[1].Ib }}</div>
          <div style="font-size: 2vh; color: #B6F9E4">Ib</div>
        </div>
        <div class="item">
          <div style="font-size: 24px;font-family: 'bigfont'; color: #F53028">{{ topData.incomingCurrentPoint[1].Ic }}</div>
          <div style="font-size: 2vh; color: #B6F9E4">Ic</div>
        </div>
      </div>
      <div ref="chartEtcTwo" class="chart" />
    </div>
    <!-- 今日用电 -->
    <div>
      <div class="title">
        <svg-icon icon-class="today0" class="todays" style="font-size: 3vh;margin-right: 10px" />
        今日用电 (KW)
      </div>
      <div class="numValue">{{ topData.day }}</div>
      <div class="yesterday">昨日同期  {{ topData.etcYesterday }} <span class="isUp" :class="{down: isDownEtc}" style="margin-left: 10px">{{ topData.etcPercent }}</span></div>
      <div ref="chartTodayEct" class="chart" />
    </div>
  </section>
</template>

<script>
const echarts = require('echarts')
export default {
  props: {
    topData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      arr: [0, 1, 2, 3],
      chartLoad: null,
      chartTodayEct: null,
      chartEtcOne: null,
      chartEtcTwo: null,
      voltageChartOne: null,
      voltageChartTwo: null
    }
  },
  computed: {
    isDownLoad() {
      if (this.topData.loadPercent.slice(0, 1) === '-') {
        return true
      }
      return ''
    },
    isDownEtc() {
      if (this.topData.etcPercent.slice(0, 1) === '-') {
        return true
      }
      return ''
    }
  },
  mounted() {
    this.topData.todayLogLoad.length && this.initRealLoadChart()
    if (this.topData.incomingCurrentLogPoint) {
      this.initchartEtcOne()
    }
    if (this.topData.incomingCurrentLogPoint && this.topData.incomingCurrentLogPoint[1]) {
      this.initchartEtcTwo()
    }
    if (this.topData.incomingLineVoltage) {
      this.initvoltageChartOne()
    }
    if (this.topData.incomingLineVoltage && this.topData.incomingLineVoltage[1]) {
      this.initvoltageChartTwo()
    }
    this.topData.etcHourPoint.length && this.initTodayEtc()
  },
  methods: {
    // 实时负荷
    initRealLoadChart() {
      this.chartLoad = echarts.init(this.$refs.chart)
      const option = {
        xAxis: {
          type: 'category',
          show: false,
          boundaryGap: false
        },
        lineStyle: {
          color: '#01CBE7'
        },
        yAxis: {
          type: 'value',
          show: false
          // max: 15,
          // // min: 5
        },
        grid: {
          left: 5,
          top: 0,
          right: 5,
          bottom: 10
        },
        series: [{
          data: this.topData.todayLogLoad,
          type: 'line',
          symbol: 'none',
          smooth: true,
          areaStyle: {
            normal: {
              // 右，下，左，上
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(0, 255, 255, 1)'
              }, {
                offset: 1,
                color: 'rgba(0, 255, 255, 0)'
              }])

            }
          }
        }]
      }
      option && this.chartLoad.setOption(option)
      window.addEventListener('resize', () => {
        this.chartLoad.resize()
      })
    },
    // 1#进线电压
    initvoltageChartOne() {
      this.voltageChartOne = echarts.init(this.$refs.voltageChartOne)
      const option = {
        animation: false,
        grid: { // 直角坐标系内绘图网格
          left: '0', // grid 组件离容器左侧的距离,
          // left的值可以是80这样具体像素值，
          // 也可以是'80%'这样相对于容器高度的百分比
          top: '10',
          right: '0',
          bottom: '0',
          containLabel: true // gid区域是否包含坐标轴的刻度标签。为true的时候，
          // left/right/top/bottom/width/height决定的是包括了坐标轴标签在内的
          // 所有内容所形成的矩形的位置.常用于【防止标签溢出】的场景
        },
        xAxis: { // 直角坐标系grid中的x轴,
          // 一般情况下单个grid组件最多只能放上下两个x轴,
          // 多于两个x轴需要通过配置offset属性防止同个位置多个x轴的重叠。
          type: 'value', // 坐标轴类型,分别有：
          // 'value'-数值轴；'category'-类目轴;
          // 'time'-时间轴;'log'-对数轴
          splitLine: {
            show: false
          }, // 坐标轴在 grid 区域中的分隔线
          axisLabel: {
            show: false
          }, // 坐标轴刻度标签
          axisTick: {
            show: false
          }, // 坐标轴刻度
          axisLine: {
            show: false
          } // 坐标轴轴线
        },
        yAxis: {
          type: 'category',
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            color: '#B6F9E4',
            fontSize: 15
            // padding: [0, 0, 0, 0]
          },
          data: ['Uca', 'Ubc', 'Uab'] // 类目数据，在类目轴（type: 'category'）中有效。
          // 如果没有设置 type，但是设置了axis.data,则认为type 是 'category'。
        },
        series: [ // 系列列表。每个系列通过 type 决定自己的图表类型
          {
            name: '%', // 系列名称
            type: 'bar', // 柱状、条形图
            barWidth: 6, // 柱条的宽度,默认自适应
            data: this.topData.incomingLineVoltage[0], // 系列中数据内容数组
            label: { // 图形上的文本标签
              show: true,
              // position: 'right', //标签的位置
              offset: [0, -11], // 标签文字的偏移，此处表示向上偏移40
              // formatter: '{c}{a}', //标签内容格式器 {a}-系列名,{b}-数据名,{c}-数据值
              color: 'white', // 标签字体颜色
              fontSize: 17, // 标签字号
              fontFamily: 'bigfont1',
              position: [2, -6]
            },
            itemStyle: { // 图形样式
              normal: { // normal 图形在默认状态下的样式;
                // emphasis图形在高亮状态下的样式
                barBorderRadius: 10, // 柱条圆角半径,单位px.
                // 此处统一设置4个角的圆角大小;
                // 也可以分开设置[10,10,10,10]顺时针左上、右上、右下、左下
                color: new echarts.graphic.LinearGradient(
                  0, 0, 1, 0,
                  [{
                    offset: 0,
                    color: '#22B6ED' // 柱图渐变色起点颜色
                  },
                  {
                    offset: 1,
                    color: '#3FE279' // 柱图渐变色终点颜色
                  }
                  ]
                )
              }
            },
            zlevel: 1 // 柱状图所有图形的 zlevel 值,
            // zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
          },
          {
            name: '进度条背景',
            type: 'bar',
            barGap: '-260%', // 不同系列的柱间距离，为百分比。
            // 在同一坐标系上，此属性会被多个 'bar' 系列共享。
            // 此属性应设置于此坐标系中最后一个 'bar' 系列上才会生效，
            // 并且是对此坐标系中所有 'bar' 系列生效。
            barWidth: 6,
            // data: [20, 20, 20],
            color: '#151B87', // 柱条颜色
            itemStyle: {
              normal: {
                barBorderRadius: 10
              }
            }
          }
        ]
      }
      option && this.voltageChartOne.setOption(option)
      window.addEventListener('resize', () => {
        this.voltageChartOne.resize()
      })
    },
    // 2#进线电压
    initvoltageChartTwo() {
      this.voltageChartTwo = echarts.init(this.$refs.voltageChartTwo)
      const option = {
        animation: false,
        grid: { // 直角坐标系内绘图网格
          left: '0', // grid 组件离容器左侧的距离,
          // left的值可以是80这样具体像素值，
          // 也可以是'80%'这样相对于容器高度的百分比
          top: '10',
          right: '0',
          bottom: '0',
          containLabel: true // gid区域是否包含坐标轴的刻度标签。为true的时候，
          // left/right/top/bottom/width/height决定的是包括了坐标轴标签在内的
          // 所有内容所形成的矩形的位置.常用于【防止标签溢出】的场景
        },
        xAxis: { // 直角坐标系grid中的x轴,
          // 一般情况下单个grid组件最多只能放上下两个x轴,
          // 多于两个x轴需要通过配置offset属性防止同个位置多个x轴的重叠。
          type: 'value', // 坐标轴类型,分别有：
          // 'value'-数值轴；'category'-类目轴;
          // 'time'-时间轴;'log'-对数轴
          splitLine: {
            show: false
          }, // 坐标轴在 grid 区域中的分隔线
          axisLabel: {
            show: false
          }, // 坐标轴刻度标签
          axisTick: {
            show: false
          }, // 坐标轴刻度
          axisLine: {
            show: false
          } // 坐标轴轴线
        },
        yAxis: {
          type: 'category',
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            color: '#B6F9E4',
            fontSize: 15
            // padding: [0, 0, 0, 0]
          },
          data: ['Uca', 'Ubc', 'Uab'] // 类目数据，在类目轴（type: 'category'）中有效。
          // 如果没有设置 type，但是设置了axis.data,则认为type 是 'category'。
        },
        series: [ // 系列列表。每个系列通过 type 决定自己的图表类型
          {
            name: '%', // 系列名称
            type: 'bar', // 柱状、条形图
            barWidth: 6, // 柱条的宽度,默认自适应
            data: this.topData.incomingLineVoltage[1], // 系列中数据内容数组
            label: { // 图形上的文本标签
              show: true,
              // position: 'right', //标签的位置
              offset: [0, -11], // 标签文字的偏移，此处表示向上偏移40
              // formatter: '{c}{a}', //标签内容格式器 {a}-系列名,{b}-数据名,{c}-数据值
              color: 'white', // 标签字体颜色
              fontSize: 17, // 标签字号
              fontFamily: 'bigfont1',
              position: [2, -6]
            },
            itemStyle: { // 图形样式
              normal: { // normal 图形在默认状态下的样式;
                // emphasis图形在高亮状态下的样式
                barBorderRadius: 10, // 柱条圆角半径,单位px.
                // 此处统一设置4个角的圆角大小;
                // 也可以分开设置[10,10,10,10]顺时针左上、右上、右下、左下
                color: new echarts.graphic.LinearGradient(
                  0, 0, 1, 0,
                  [{
                    offset: 0,
                    color: '#22B6ED' // 柱图渐变色起点颜色
                  },
                  {
                    offset: 1,
                    color: '#3FE279' // 柱图渐变色终点颜色
                  }
                  ]
                )
              }
            },
            zlevel: 1 // 柱状图所有图形的 zlevel 值,
            // zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
          },
          {
            name: '进度条背景',
            type: 'bar',
            barGap: '-260%', // 不同系列的柱间距离，为百分比。
            // 在同一坐标系上，此属性会被多个 'bar' 系列共享。
            // 此属性应设置于此坐标系中最后一个 'bar' 系列上才会生效，
            // 并且是对此坐标系中所有 'bar' 系列生效。
            barWidth: 6,
            // data: [20, 20, 20],
            color: '#151B87', // 柱条颜色
            itemStyle: {
              normal: {
                barBorderRadius: 10
              }
            }
          }
        ]
      }
      option && this.voltageChartTwo.setOption(option)
      window.addEventListener('resize', () => {
        this.voltageChartTwo.resize()
      })
    },
    // 1#进线电流
    initchartEtcOne() {
      this.chartEtcOne = echarts.init(this.$refs.chartEtcOne)
      const option = {
        xAxis: {
          type: 'category',
          show: false,
          boundaryGap: false
        },
        yAxis: {
          type: 'value',
          show: false
          // max: 15,
          // // min: 5
        },
        grid: {
          left: 5,
          top: 0,
          right: 5,
          bottom: 5
        },
        series: [{
          data: this.topData.incomingCurrentLogPoint[0][0],
          itemStyle: {
            normal: {
              lineStyle: {
                color: '#FFC400'
              }
            }
          },
          type: 'line',
          symbol: 'none',
          smooth: true,
          areaStyle: {
            normal: {
              // 右，下，左，上
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(0, 255, 255, 1)'
              }, {
                offset: 1,
                color: 'rgba(0, 255, 255, 0)'
              }])

            }
          }
        },
        {
          data: this.topData.incomingCurrentLogPoint[0][1],
          itemStyle: {
            normal: {
              lineStyle: {
                color: '#0ACD90'
              }
            }
          },
          type: 'line',
          symbol: 'none',
          smooth: true,
          areaStyle: {
            normal: {
              // 右，下，左，上
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(255, 196, 0, 1)'
              }, {
                offset: 1,
                color: 'rgba(255, 196, 0, 0)'
              }])

            }
          }
        },
        {
          data: this.topData.incomingCurrentLogPoint[0][2],
          itemStyle: {
            normal: {
              lineStyle: {
                color: '#F53028'
              }
            }
          },
          type: 'line',
          symbol: 'none',
          smooth: true,
          areaStyle: {
            normal: {
              // 右，下，左，上
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(245, 48, 40, 1)'
              }, {
                offset: 1,
                color: 'rgba(245, 48, 40, 0)'
              }])

            }
          }
        }
        ]
      }
      option && this.chartEtcOne.setOption(option)
      window.addEventListener('resize', () => {
        this.chartEtcOne.resize()
      })
    },
    // 1#进线电流
    initchartEtcTwo() {
      this.chartEtcTwo = echarts.init(this.$refs.chartEtcTwo)
      const option = {
        xAxis: {
          type: 'category',
          show: false,
          boundaryGap: false
        },
        yAxis: {
          type: 'value',
          show: false
          // max: 15,
          // // min: 5
        },
        grid: {
          left: 5,
          top: 0,
          right: 5,
          bottom: 5
        },
        series: [{
          data: this.topData.incomingCurrentLogPoint[1][0],
          itemStyle: {
            normal: {
              lineStyle: {
                color: '#FFC400'
              }
            }
          },
          type: 'line',
          symbol: 'none',
          smooth: true,
          areaStyle: {
            normal: {
              // 右，下，左，上
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(0, 255, 255, 1)'
              }, {
                offset: 1,
                color: 'rgba(0, 255, 255, 0)'
              }])

            }
          }
        },
        {
          data: this.topData.incomingCurrentLogPoint[1][1],
          itemStyle: {
            normal: {
              lineStyle: {
                color: '#0ACD90'
              }
            }
          },
          type: 'line',
          symbol: 'none',
          smooth: true,
          areaStyle: {
            normal: {
              // 右，下，左，上
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(255, 196, 0, 1)'
              }, {
                offset: 1,
                color: 'rgba(255, 196, 0, 0)'
              }])

            }
          }
        },
        {
          data: this.topData.incomingCurrentLogPoint[1][2],
          itemStyle: {
            normal: {
              lineStyle: {
                color: '#F53028'
              }
            }
          },
          type: 'line',
          symbol: 'none',
          smooth: true,
          areaStyle: {
            normal: {
              // 右，下，左，上
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(245, 48, 40, 1)'
              }, {
                offset: 1,
                color: 'rgba(245, 48, 40, 0)'
              }])

            }
          }
        }
        ]
      }
      option && this.chartEtcTwo.setOption(option)
      window.addEventListener('resize', () => {
        this.chartEtcTwo.resize()
      })
    },
    // 今日用电
    initTodayEtc() {
      this.chartTodayEct = echarts.init(this.$refs.chartTodayEct)
      const option = {
        xAxis: {
          type: 'category',
          show: false
        },
        lineStyle: {
          color: '#078792'
        },
        yAxis: {
          type: 'value',
          show: false
        },
        grid: {
          top: '0',
          left: '0',
          right: '15px',
          bottom: '10'
        },
        series: [{
          data: this.topData.etcHourPoint,
          type: 'bar',
          symbol: 'none',
          smooth: true,
          itemStyle: {
            normal: {
              // 右，下，左，上
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(7, 135, 146, 1)'
              }, {
                offset: 1,
                color: 'rgba(7, 135, 146, 0)'
              }]),
              barBorderRadius: [15, 15, 0, 0]
            }
          }
        }]
      }
      option && this.chartTodayEct.setOption(option)
      window.addEventListener('resize', () => {
        this.chartTodayEct.resize()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
section {
    // border: 1px solid #000;
    height: 21%;
    display: flex;
    & > div {
        flex: 1;
        // border: 1px solid #000;
        background: url('../../../assets/squ.png') no-repeat;
        background-size: 100% 100%;
        // padding: 23px;
        padding: 2vh;
        .title {
            display: flex;
            align-items: center;
            color: #fff;
            height: 18%;
            // border: 1px solid #000;
        }
        .numValue {
            font-size: 32px;
            color: #01CBE7;
            font-family: 'bigfont';
            height: 27%;
        }
        .yesterday {
            font-size: 14px;
            color: #B6F9E4;
            height: 13%;
            .isUp {
              color: #D9001B;
              font-weight: bolder;
            }

            .down {
              color: #21b351;
            }
        }
        .chart {
            height: 46%;
        }
        .electricity {
            height: 40%;
            display: flex;
            .item {
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: center;
                div {
                    margin-bottom: 5px;
                }
            }
        }
        .voltage {
            display: flex;
             height: 82%;
            .item {
                flex:1;
                // border: 1px solid #000;
                .itemTitle {
                    color: #fff;
                    font-size: 12px;
                    height: 15%;
                    line-height: 20px;
                }
                .chart {
                    height: 85%;
                    // border: 1px solid #000;
                }
            }
        }
    }
}
</style>
